<template>
  <div>
    <div class="data">
      <div class="searchForm">
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item label="商品名称">
            <el-input
              v-model="params.name"
              placeholder="按商品名称查找"
              class="block"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchList"
              class="block"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="message">
      <div class="message1">
        <el-table :data="productData" 
                  :hander-cell-style="{blackground:'#f2f5fc',color:'#555555'}"
                  boder>
          <el-table-column prop="imgs" label = "图片"> </el-table-column>
          <el-table-column prop="name" label = "商品名称"> </el-table-column>
          <el-table-column prop="brandId" label="id"> </el-table-column>
          <el-table-column prop="sales" label="数量"></el-table-column>          
          <el-table-column label="操作" width="320">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="
                  $router.push({
                    
                  })
                "
                >增加</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-paperclip"
                @click="openGroup(scope.row.userId)"
                >减少</el-button
              >
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-refresh-right"
                @click="resetPassWord(scope.row)"
                >修改</el-button
              >
              
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="params.pageNum"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
import md5 from "js-md5";
export default {
  name: "productList",
  components: {
  },
  props: {},
  data() {
    return {
      loading: false,
      params: {
        pageSize: 10,
        pageNum: 1,
        name: "",
        nickName: "",
      },
      total: 0,
      rows: [],
      visible: false,
    };
  },
  methods: {
    loadProduct() {
      this.$axios
        .get("http://localhost:8081/product/list")
        .then((res) => res.data)
        .then((res) => {
          if (res.status == 200) {
            this.productData = res.data;
          } else {
            alert("数据请求错误");
          }
        });
    },
    openGroup(userId) {
      //打开弹框
      this.visible = true;
      //延迟更新
      this.$nextTick(() => {
        //调用组件方法 获取数据
        this.$refs.group.getList(userId);
      });
    },
    resetPassWord(row) {
      this.$confirm("是否重置该用户的密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        row.passWord = md5("123456");
        this.$http({
          url: "/user/update",
          method: "PUT",
          data: row,
        }).then((res) => {
          if (!res.errorMsg) {
            this.$message({
              message: "重置该用户密码成功",
              type: "success",
            });
          }
        });
      });
    },
    changeStatus(row) {
      this.$http({
        url: "/user/update",
        method: "PUT",
        data: row,
      }).then((res) => {
        console.log(res);
      });
    },
    sizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNum = 1;
      this.getList();
    },
    currentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.getList();
    },
    searchList() {
      this.params.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$http({
        url: "http://localhost:8081/user/list",
        method: "GET",
        params: this.params,
      }).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.rows = res.rows;
      });
    },
  },
  beforeMount() {
    this.loadProduct();
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>
  
  <style scoped>
</style>
  